<template>
  <div>
    <el-form :inline="true" class="user-search">
      <el-form-item>
        <div class="block">
          <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-dropdown>
          <el-button>
            更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button @click="handleList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="房型" width="180">
      </el-table-column>
      <el-table-column prop="name" label="价格名称" width="180">
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div align="center">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page"
        :page-sizes="[4, 10, 20, 50]" :page-size="queryForm.rows" layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        queryForm: {
          id: null,
          name: null,
          page: 1,
          rows: 4,
          total: -1
        },
        mergeForm: {
          id: null,
          sellerId: null,
          roomid: null,
          name: null,
          price: null,
          status: null,
          isVip: null,
          num: null,
          prepay: null,
          integral: null,
          startTime: null,
          endTime: null,
          oprice: null
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      }
    },
    created: function() {
      this.doList();
    },
    methods: {
      doList: function() {
        this.axios.post(this.axios.urls.DYM_HOTELROOMMONEY_LIST, this.queryForm).then((response) => {
          console.log(response);
          this.tableData = response.data.result
          this.queryForm.page = response.data.page
          this.queryForm.rows = response.data.rows
          this.queryForm.total = response.data.total
        })
      },
      handleList: function() {
        this.doList()
      },
      handleSizeChange(rows) {
        this.queryForm.page = 1
        this.queryForm.rows = rows
        this.doList()
      },
      handleCurrentChange(page) {
        this.queryForm.page = page
        this.doList()
      }
    }
  }
</script>

<style>
  .el-dropdown {
    vertical-align: top;
  }

  .el-dropdown+.el-dropdown {
    margin-left: 15px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
